<template>
  <!-- 添加和编辑弹窗 -->
  <n-modal
    v-model:show="showModal"
    class=""
    preset="dialog"
    :title="'选择 Client'"
    :bordered="false"
    :segmented="{content: 'soft', footer: 'soft'}"
    :show-icon="false"
    :maskClosable="false"
    :style="{ width: '40em' }"
    >

    <n-grid :x-gap="12" :y-gap="8" responsive="screen" item-responsive>
      <n-gi span="12 m:8 l:6 xl:4" 
        v-for="item,index in clients" :key="'client_' + index">
          <div class="client-card click-card" @click="handleSelected(item)">
              <span>{{item.name}}</span>
              <div class="address"> {{ item.host }}:{{ item.port }}</div>
              
              <n-scrollbar style="max-height:10em" :trigger="'hover'" v-if="item.deviceInfo">
                <div class="spaces">
                  <span v-for="di,index in item.deviceInfo" :key="'deviceInfo_'+index">  
                    {{ di.name }} &nbsp;
                    (<span class="unuse">{{di.usableSpaceStr}}</span> / <span class="total">{{di.totalSpaceStr}}</span>)
                    <br/>
                  </span>
                </div>
              </n-scrollbar>
          </div>
          
      </n-gi>
    </n-grid>

  </n-modal>
</template>

<script setup>
import { ref } from 'vue'
import serverApi from '/src/api/fsync/server.js'

const showModal = ref(false)
const clients = ref([])
const emit = defineEmits([ "selected" ])

// 所有 clients
const listClients = async () => {
  await serverApi.clientList().then(res => {
    //console.log("list-client-res", res)
    clients.value = res.data
  })
}

// showForm(false, vo)  showForm(true, null) 
const show = () => {
  showModal.value = true
  listClients()
}
const close = () => {
  showModal.value = false
}

const handleSelected = (node) => {
  close()
  emit("selected", node)
}


defineExpose({
  show, close,
})

</script>

<style scoped lang="scss">
.client-card{
  position: relative;
  padding: 0.4em 0.4em;
  font-size: 0.8em;
  box-shadow: 0 8px 18px #0003;
}
.address {
  color: #808080;
}

.click-card{
  &:hover{
    cursor: pointer;
  }
}
.spaces{
  .unuse{
    color: #36a136;
  }
  .total{
    color: #0a6eab;
  }
}
</style>
